<template>
  <el-main>
    <!-- <SelectedItem msg="SelectedItem" /> -->
    <div class="cc-display">
      <div class="cc-display searchResult">
        <div class="width80p" style="position: relative; min-height: 400px">
          <div style="width: 75%">
            <div
              style="
                width: 100%;
                height: 28px;
                border-left: 5px solid #FA5A57;
                margin-bottom: 30px;
              "
              class="border-none sc-display"
            >
              <span class="font16h">&nbsp;全部评论</span>
              <span class="font16g">&nbsp;&nbsp;14</span>
            </div>
            <!--一个评论楼-->
            <div
              style="width: 100%"
              v-for="(item, index) in discusslist"
              :key="index"
            >
              <div
                style="width: 100%; height: 60px; position: relative"
                class="sc-display"
              >
                <img
                  src="/imgs/firstpage/userexample.png"
                  style="width: 46px; height: 46px; border-radius: 23px"
                />
                <div style="width: 30%; height: 60px">
                  <div style="width: 100%; height: 30px" class="sc-display">
                    <span class="font16g">&nbsp;张老师</span>
                  </div>
                  <div style="width: 100%; height: 30px" class="sc-display">
                    <span class="font14d"
                      >&nbsp;{{ item.out.floor }}楼&nbsp;{{
                        item.out.discussTime
                      }}</span
                    >
                  </div>
                </div>
                <div
                  style="
                    width: 30%;
                    height: 60px;
                    position: absolute;
                    right: 0;
                    top: 0;
                  "
                  class="ec-display"
                >
                  <span class="font14d">&nbsp;赞14</span
                  ><span class="font14d">&nbsp;回复14</span>
                </div>
              </div>
              <div
                style="width: 100%; position: relative; padding-left: 50px"
                class="border-none"
              >
                <div style="width: 100%; text-align: left">
                  <span class="font14e">{{ item.out.content }}</span>
                </div>
                <div
                  style="
                    width: 100%;
                    border-bottom: 1px solid #ddd;
                    height: 10px;
                  "
                ></div>
              </div>
              <!--一个评论层-->
              <div
                style="width: 100%; padding-left: 50px"
                class="border-none"
                v-for="(inside, inid) in item.inside"
                :key="inid"
              >
                <div
                  style="width: 100%; height: 60px; position: relative"
                  class="sc-display"
                >
                  <img
                    src="/imgs/firstpage/userexample.png"
                    style="width: 46px; height: 46px; border-radius: 23px"
                  />
                  <div style="width: 30%; height: 60px">
                    <div style="width: 100%; height: 30px" class="sc-display">
                      <span class="font16g">&nbsp;张老师</span>
                    </div>
                    <div style="width: 100%; height: 30px" class="sc-display">
                      <span class="font14d"
                        >&nbsp;{{ inside.id }}楼&nbsp;{{
                          inside.replyTime
                        }}</span
                      >
                    </div>
                  </div>
                  <div
                    style="
                      width: 30%;
                      height: 60px;
                      position: absolute;
                      right: 0;
                      top: 0;
                    "
                    class="ec-display"
                  >
                    <span class="font14d">&nbsp;赞14</span
                    ><span class="font14d">&nbsp;回复14</span>
                  </div>
                </div>
                <div
                  style="width: 100%; height: 60px; position: relative"
                  class="border-none"
                >
                  <div style="width:100%;text-align:left;">
                    <span class="font14e">{{ inside.content }}</span>
                  </div>
                  <div
                    style="
                      width: 100%;
                      border-bottom: 1px solid #ddd;
                      height: 10px;
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
// @ is an alias to /src
// import SelectedItem from "./SelectedItem.vue";

export default {
  name: "TalkAbout",
  props: {
    discusslist: Array
  },
  data() {
    return {};
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}
.searchResult {
  width: 100%;
  min-width: 1000px;
  margin-top: 20px;
}
.width80p {
  height: 100%;
  width: 80%;
  min-width: 1000px;
  max-width: 1200px;
}
</style>
